<template>
    <div class="setting">
        <el-card shadow="hover">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="基本设置" name="baseConfig">
                    <el-form ref="formRef" :model="form.baseConfig" :rules="rules" label-width="100px">
                        <el-form-item label="小程序appid" prop="wx_mini_app_id" style="width: 400px">
                            <el-input v-model="form.baseConfig.wx_mini_app_id" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="小程序secret" prop="wx_mini_app_secret" style="width: 400px">
                            <el-input v-model="form.baseConfig.wx_mini_app_secret" autocomplete="off" />
                        </el-form-item>
                        <el-form-item style="width: 400px; margin-top: 30px">
                            <el-button type="primary" @click="handleSubmit(formRef)">保存设置</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="支付设置" name="payConfig"></el-tab-pane>
                <el-tab-pane label="其他设置" name="otherConfig"></el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    import type { TabsPaneContext, FormInstance, FormRules } from 'element-plus'
    import { getConfigs, saveConfigs } from '@/api/base'

    const activeName = ref('baseConfig')

    const formRef = ref<FormInstance>()

    const form = reactive({
        baseConfig: {
            wx_mini_app_id: '',
            wx_mini_app_secret: ''
        },
        payConfig: {},
        otherConfig: {}
    })
    const rules = reactive<FormRules>({
        // wx_mini_app_id: [{ required: true, message: '请填写小程序appid', trigger: 'blur' }]
    })

    onMounted(() => {
        getConfigs({
            keys: ['wx_mini_app_id', 'wx_mini_app_secret']
        }).then((res: any) => {
            form.baseConfig = res.data
        })
    })
    /**
     * 处理表单提交
     * @param formEl
     */
    const handleSubmit = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (!valid) return
            console.log(form.baseConfig)
            saveConfigs(form.baseConfig).then((res) => {
                ElMessage({
                    type: 'success',
                    message: '保存成功'
                })
            })
        })
    }

    const handleClick = (tab: TabsPaneContext, event: Event) => {
        console.log(tab, event)
    }
</script>

<style>
    .demo-tabs > .el-tabs__content {
        padding: 20px 0;
        color: #6b778c;
    }
</style>
